<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="height: 2000px;">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box4">4</div>
		<div class="box5">5</div>
		<div class="box6">6</div>
		<div class="box3">3</div>
	</body>
</html>
<style type="text/css">
	.box1{
		width: 200px;
		height: 200px;
		background-color: #bfa;
	}
	.box2{
		width: 200px;
		height: 200px;
		background-color: #FF0000;
		/* 偏移量:offset 当元素开启定位后,看可通过偏移量设置元素位置 top mottom left right*/
		/* 包含快(containing-block)正常情况下,包含快是离祖先元素最近的块元素 绝对定位包含块是离他最近的开启定位的祖先元素*/
		/* 定位:position 是一个更加高级的布局手段，通过定位将元素摆放到页面任意位置*/
		/* static默认值，元素静止没开启定位 */
		/* relative开启相对定位 如果不设置偏移量元素不会发生任何变化 参照元素在文档流中的位置进行定位 不会脱离文档流(灵魂出窍)*/
		/* absolute开启绝对定位 如果不设置偏移量元素位置不会发生任何变化 元素会从文档流中脱离 会改变元素的性质 是元素提升一个层级 相对于其包含块进行定位*/
		/* fixed开启固定定位  固定定位也是一种绝对定位,大部分特点和绝对定位一样 不同的是固定定位永远参照于浏览器可视窗口定位*/
		/* sticky开启粘滞定位 粘滞定位和相对定位基本一致,可以在到达某位置时固定*/
		position: relative;
		left: 200px;
		top: -200px;
		
		
	}
	.box3{
		width: 200px;
		height: 200px;
		background-color: #00FFFF;
	}
	.box4{
		width: 200px;
		height: 200px;
		background-color: #FFFF00;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.box5{
		width: 200px;
		height: 200px;
		background-color: #FAEBD7;
		position: fixed;
		top: 0;
		left: 0;
	}
	.box6{
		width: 200px;
		height: 200px;
		background-color: chartreuse;
		position: sticky;
		top: 100px;
	}
</style>